<link rel="stylesheet/less" type="text/css" href="./bricks/component/dashboard/dashboard.less"/>
<link rel="stylesheet/less" type="text/css" href="./bricks/component/misc/misc.less"/>
<link rel="stylesheet/less" type="text/css" href="./bricks/component/misc/cover.less"/>


<div class="ub-container">


    <div class="block-breaker"></div>

    <div style="max-width:300px">
        <div class="ub-panel border-top">
            <div class="body">
                <div class="ub-text-center">
                    <a class="avatar ub-inline-block" style="width:4rem;padding:1rem 0;" href="#">
                        <div class="cover ub-cover-1-1 circle" data-background-url="placeholder/200x200"></div>
                    </a>
                    <div class="ub-line" style="width:50%;margin:0 auto;"></div>
                    <div class="padding-top">
                        <div><a class="ub-block ub-text" href="#">用户名</a></div>
                        <div class="ub-text-muted margin-top">第 11 位会员</div>
                        <div class="ub-text-muted">注册于 4年 前</div>
                    </div>
                </div>
                <div class="ub-line"></div>
                <div class="row">
                    <div class="col-6">
                        <div class="ub-dashboard-item ub-text-center">
                            <div class="title-gray">
                                标题
                            </div>
                            <div class="value-primary">
                                <a href="#" class="number">{NUM,1000,9999}</a>
                            </div>
                        </div>
                    </div>
                    <div class="col-6">
                        <div class="ub-dashboard-item ub-text-center">
                            <div class="title-gray">
                                标题
                            </div>
                            <div class="value-primary">
                                <a href="#" class="number">{NUM,1000,9999}</a>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="row margin-top">
                    <div class="col-6">
                        <a href="#" class="btn btn-primary-line btn-block">操作1</a>
                    </div>
                    <div class="col-6">
                        <a href="#" class="btn btn-primary-line btn-block">操作2</a>
                    </div>
                </div>
            </div>
        </div>
    </div>


    <div class="block-breaker"></div>
    <div class="ub-panel transparent">
        <div class="head">
            <div class="title">
                样式
            </div>
        </div>
        <div class="body">
            <div class="row">
                <div class="col-md-3" data-repeat="4">
                    <a href="#" class="ub-dashboard-item-a">
                        <div class="icon">
                            <i class="font iconfont icon-home"></i>
                        </div>
                        <div class="title">{ZH,4,6}</div>
                        <div class="desc">{ZH,20,40}</div>
                    </a>
                </div>
            </div>
        </div>
    </div>
    <div class="block-breaker"></div>
    <div class="ub-panel transparent">
        <div class="head">
            <div class="title">
                样式
            </div>
        </div>
        <div class="body">
            <div class="row">
                <div class="col-md-3" data-repeat="4">
                    <a href="#" class="ub-dashboard-item-a">
                        <div class="icon">
                            <i class="font iconfont icon-home"></i>
                        </div>
                        <div class="number-value">{NUM,1000,9999}</div>
                        <div class="number-title">{ZH,4,6}</div>
                    </a>
                </div>
            </div>
        </div>
    </div>
    <div class="block-breaker"></div>
    <div class="ub-panel transparent">
        <div class="head">
            <div class="title">
                样式
            </div>
        </div>
        <div class="body">
            <div class="row">
                <div class="col-md-3" data-repeat="4">
                    <a href="#" class="ub-dashboard-item-b">
                        <div class="icon">
                            <i class="font iconfont icon-home"></i>
                        </div>
                        <div class="number-value">{NUM,1000,9999}</div>
                        <div class="number-title">{ZH,4,6}</div>
                    </a>
                </div>
            </div>
        </div>
    </div>
    <div class="block-breaker"></div>
    <div class="ub-panel">
        <div class="head">
            <div class="title">
                样式
            </div>
        </div>
        <div class="body">
            <div class="row">
                <div class="col-md-3" data-repeat="4">
                    <div class="ub-dashboard-item ub-text-center">
                        <div class="title-gray">
                            标题
                        </div>
                        <div class="value-primary">
                            <a href="#" class="number">{NUM,1000,9999}</a>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="block-breaker"></div>
    <div class="ub-panel">
        <div class="head">
            <div class="title">
                样式
            </div>
        </div>
        <div class="body">
            <div class="row">
                <div class="col-md-3" data-repeat="8">
                    <a href="#" class="btn btn-block ub-text-left margin-bottom">
                        标题
                    </a>
                </div>
            </div>
        </div>
    </div>
</div>
